<template>
  <div class="box">
    <div class="left">
      <LeftBar @done="getLeftArr"/>
    </div>
    <div class="right">
      <el-form ref="form" size="mini" :model="form" label-width="80px">

        <NumberItem @done="getNumberItem"/>
        <NameAndAddress @done="getNameAndAddress"/>
        <DateItem @done="getDateItem"/>
        <LegalItem @done="getLegalInfo"/>
        <IsOtherLegal @done="getOtherLegal"/>
        <PatentAward @done="getPatentAward"/>
        <PatentValue @done="getPatentValue"/>
        <Other @done="getOther"/>

        <el-form-item style="position:relative;height:60px">
          <el-button size="medium" type="primary" @click="validateData"
                     style="background-color:#008ac0;position:absolute;right:60px">检索
          </el-button>
        </el-form-item>

      </el-form>

    </div>

  </div>
</template>

<script>
  import {
    toRetrieval
  } from '@/api/retrieval'
  import NumberItem from './components/number.vue'
  import NameAndAddress from './components/nameAndAddress.vue'
  import DateItem from './components/dateItem.vue'
  import LegalItem from './components/legalItem.vue'
  import IsOtherLegal from './components/isOtherLegal.vue'
  import PatentAward from './components/patentAward.vue'
  import PatentValue from './components/patentValue.vue'
  import Other from './components/other.vue'

  import LeftBar from './components/leftBar.vue'

  // import { combination } from './components/leftBar.js'

  export default {
    components: {
      NumberItem,
      NameAndAddress,
      DateItem,
      LegalItem,
      PatentAward,
      PatentValue,
      IsOtherLegal,
      Other,
      LeftBar
    },
    data() {
      return {
        form: {},

        number: [],
        nameAndAddress: [],
        dateItem: {},
        legalInfo: [],
        patentAward: [],
        patentValue: [],
        otherLegal: [],
        other: [],

        leftData: []

      }
    },
    methods: {
      getNumberItem(data) {
        this.number = data
      },
      getNameAndAddress(data) {
        this.nameAndAddress = data
      },
      getDateItem(data) {
        //  console.log("日期", data)

        this.dateItem = data
      },
      getLegalInfo(data) {
        this.legalInfo = data
        //  console.log("数据",data)
        // console.log('数据', data)
      },
      getPatentAward(data) {
        this.patentAward = data
      },
      getPatentValue(data) {
        this.patentValue = data
      },
      getOtherLegal(data) {
        this.otherLegal = data
      },
      getOther(data) {
        this.other = data
        //  console.log("数据",data)
      },

      getLeftArr(data) {
        const arr = []
        if (data.length !== 0) {
          data.forEach((item, index) => {
            if (index !== 0) {
              const obj = {
                fieldName: 'applicants_stat',
                boolType: 1,
                value: item
              }
              arr.push(obj)
            } else {
              const obj = {
                boolType: 1,
                fieldName: 'applicants_stat',
                value: item
              }
              arr.push(obj)
            }
          })
        }
        this.leftData = arr
      },

      validateData() {

        let queryConditions
        if (JSON.stringify(this.dateItem) === '{}') {
          queryConditions = [...this.number, ...this.nameAndAddress, ...this.legalInfo,
            ...this.patentAward, ...this.patentValue, ...this.otherLegal, ...this.other
          ]

          if (queryConditions.filter(item => {
            return item.value
          }).length == 0) {
            this.$message({
              message: '检索条件不能为空',
              type: 'warning'
            })
            return
          }

        } else {
          queryConditions = [...this.number, ...this.nameAndAddress, ...this.legalInfo,
            ...this.patentAward, ...this.patentValue, ...this.otherLegal, ...this.other, this.dateItem
          ]
        }

        const queryColumn = []
        const pageIndex = 1
        const pageSize = 20

        const data = {
          queryConditions: this.leftData.concat(queryConditions),
          queryColumn,
          pageIndex,
          pageSize
        }
        // console.log('数据', data)


        let searchData = JSON.parse(localStorage.getItem("searchData"))
        if (searchData) {
          let newConditions = [...searchData.queryConditions, ...data.queryConditions]
          data.queryConditions = newConditions
        }
        localStorage.setItem("searchData", JSON.stringify(data))

        toRetrieval(data).then(res => {
          this.$router.push({
            path: "/retrieval/tableList"
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    display: flex;
    // background-color: #ffffff;
    //   opacity: 0.3;
    background-color: #f3f3f3;
    flex-direction: row;

    .left {
      // background-color: #ffffff !important;
      box-sizing: border-box;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      width: 340px;
      // height: 800px;
      // background-color: aquamarine;
    }

    .right {
      flex: 1;
      //   height: 200px;
      // background-color:#ffffff;
      background-color: #f3f3f3;
      box-shadow: 4px 4px 4px #efeeee;

      padding-top: 20px;
      padding-right: 16px;
      // padding-left: 16px;

      box-sizing: border-box;

      .el-form {

        background-color: #ffffff;

        border-radius: 4px;
        padding: 12px;
        padding-top: 36px;
        padding-left: 48px;
        border: 1px solid #ebebeb;
        box-shadow: 4px 4px 4px #efeeee;
        // box-sizing: border-box;
      }

    }

  }
</style>
